<template>
  <div class="buy">
    <div class="top">
      <van-nav-bar
        title="提交订单"
        left-text
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />
    </div>

    <van-cell title="单人门票+早餐(周一至周五)" value="￥39" class="gary" />

    <div class="num">
      <span>数量</span>
      <van-stepper v-model="value" />
    </div>

    <van-cell-group>
      <van-cell title="小计" value="￥39" class="xiaoji" />
    </van-cell-group>

    <van-cell title="抵用券" is-link value="暂无可用" class="bgc" />
    <div class="heji">
      <span>订单合计</span>
      <p>￥39</p>
    </div>

    <van-cell-group>
      <van-cell title="手机号码" value="199****3064" class="bgc" />
    </van-cell-group>

    <van-cell-group>
      <van-cell value="购买须知" class="bgc" />
    </van-cell-group>

    <div>
      <ol>
        <li>退款规则：随时退、过期退</li>
        <li>为保护未成年人健康成长，未成年用户请得到监护人知悉同意后再进行购买和体验，请勿购买不适合自己年龄段的产品</li>
      </ol>
    </div>

    <footer>
      <div class="footleft">
        <van-submit-bar :price="3900" button-text="立即支付" class="orange" />
      </div>
    </footer>
  </div>
</template>

<script>
import { Toast } from "vant";

export default {
  data() {
    return {
      value: ""
    };
  },
  methods: {
    onClickLeft() {
      Toast("返回");
      this.$router.go(-1);
    },
    onClickRight() {
      Toast("按钮");
    }
  }
};
</script>

<style scoped lang='scss'>
.buy {
  // .top{
  // }
  .num {
    display: flex;
    justify-content: space-between;
    padding: 2.667vw 4.8vw;
    font-size: 3.733vw;
    align-items: center;
  }
  .gary {
    background-color: #f5f5f5;
    height: 10.667vw;
  }
  .heji {
    display: flex;
    justify-content: space-between;
    padding: 2.667vw 4.8vw;
    font-size: 3.733vw;
    align-items: center;
    p {
      font-size: 4.8vw;
      color: #ff6634;
    }
  }
  .bgc {
    border-top: 2.667vw solid #f5f5f5;
  }
  ol {
    list-style: disc;
    margin: 2.667vw 8vw;
    font-size: 3.733vw;
    color: gray;
  }
}
</style>